<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas
      id="canvas"
      width="1000"
      height="500"
      style="border: 1px red solid"
    ></canvas>
  </body>
</html>
<script src="'./tool.js"></script>
<script src="./ball.js"></script>
<script>
  const canvas = document.getElementById("canvas");
  const cxt = canvas.getContext("2d");
  const ball = new Ball(0, canvas.height);
  ball.fill(cxt);
  let angle = 0;
  const range = 20;
  let vx = 10;
  let vy = -12;
  let gravity = 0.2;
  const bounce = -0.85;
  function drawFrame() {
    window.requestAnimationFrame(drawFrame);
    cxt.clearRect(0, 0, canvas.width, canvas.height);

    // Math.sin的使用
    // ball.x +=1
    // ball.y = canvas.width / 2 + Math.sin(angle) * range;

    // ball.scaleX = 1+Math.sin(angle)*range
    // ball.scaleY = 1+Math.sin(angle)*range
    // angle += 0.025;

    // 速度与加速度
    ball.x += vx;
    ball.y += vy;

    // 边界检测
    if (ball.y + ball.radius > canvas.height) {
      console.log("超出边界");

      ball.y = canvas.height - ball.radius;
      vy = vy * bounce;
    }

    if (ball.x + ball.radius > canvas.width) {
      ball.x = canvas.width - ball.radius;
      vx = vx * bounce;
    }

    if (ball.x - ball.radius < 0) {
      ball.x = ball.radius;
      vx = vx * bounce;
    }

    ball.fill(cxt);

    vy += gravity;
  }

  drawFrame();
  //
</script>
